!function ($) {
    let array_default = [];
    let array = [];
    let prev = null;
    let next = null;

    const $list = $('.list');
    const $sort_pager = $('.sort_pager');
    $.ajax({
        url: 'http://localhost/Yoho/php/listdata.php',
        dataType: 'json'
    }).done(function (data) {
        // console.log(data);
        let $strhtml = '<ul>';
        $.each(data, function (index, value) {
            $strhtml += `
                <li>
                    <a href="detail.html?sid=${value.sid}" target="_blank">
                    <img src = "${value.url}" />
                    <p>${value.sid}${value.title}</p>
                    <span class="price">￥${value.price}</span>
                    </a>
                </li>
            `;
        });
        $strhtml += '</ul>';
        $list.html($strhtml);


        //添加懒加载
        $(function () {
            $("img.lazy").lazyload({ effect: "fadeIn" });
        });


        array_default = [];
        array = [];
        prev = null;
        next = null;

        $('.list li').each(function (index, element) {
            array[index] = $(this);
            array_default[index] = $(this);
        });
    });

    // 2.分页
    $('.page').pagination({
        pageCount: 3,//总的页数
        jump: true,//是否开启跳转到指定的页数，布尔值。
        coping: true,//是否开启首页和尾页，布尔值。
        prevContent: '上一页',
        nextContent: '下一页',
        homePage: '首页',
        endPage: '尾页',
        callback: function (api) {
            console.log(api.getCurrent());
            $.ajax({
                url: 'http://localhost/Yoho/php/listdata.php',
                data: {
                    page: api.getCurrent()
                },
                dataType: 'json'
            }).done(function (data) {
                let $strhtml = '<ul>';
                $.each(data, function (index, value) {
                    $strhtml += `
              <li>
                <a href="detail.html?sid=${value.sid}" target="_blank">
                <img src="${value.url}" />
                <p>${value.sid}${value.title}</p>
                <span class="price">￥${value.price}</span>
                </a>
              </li>
              `;
                })
                $strhtml += '</ul>';
                $list.html($strhtml);

                array_default = [];
                array = [];
                prev = null;
                next = null;

                $('.list li').each(function (index, element) {
                    array[index] = $(this);
                    array_default[index] = $(this);
                });
            })
        }
    });

    // 3.排序
    $('.sort_pager button').eq(0).on('click', function () {
        $.each(array_default, function (index, value) {
            $('.list ul').append(value);
        });
        return;
    });
    $('.sort_pager button').eq(1).on('click', function () {
        for (let i = 0; i < array.length - 1; i++) {
            for (let j = 0; j < array.length - i - 1; j++) {
                prev = parseFloat(array[j].find('.price').html().substring(1));
                next = parseFloat(array[j + 1].find('.price').html().substring(1));
                if (prev > next) {
                    let temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                }
            }
        }
        $('.list ul').empty();
        $.each(array, function (index, value) {
            $('.list ul').append(value);
        });
    });
    $('.sort_pager button').eq(2).on('click', function () {
        for (let i = 0; i < array.length - 1; i++) {
            for (let j = 0; j < array.length - i - 1; j++) {
                prev = parseFloat(array[j].find('.price').html().substring(1));
                next = parseFloat(array[j + 1].find('.price').html().substring(1));
                if (prev < next) {
                    let temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                }
            }
        }
        $('.list ul').empty();
        $.each(array, function (index, value) {
            $('.list ul').append(value);
        });
    });
}(jQuery);